<!-- 中部面板 -->
<template>
  <div class="view-base">
    <div class="top">
      <div class="title1">
        <div class="textcity" style="">
          <img src="@/assets/images/globalCommon/r_arrow.png" alt="" class="sizeImg" />广州市
        </div>
      </div>
      <div class="title2">
        <div>
          <a-select
            ref="select"
            v-model:value="value1"
            style="width: 120px"
            @focus="focus"
            @change="handleChange"
          >
            <a-select-option value="gongye">工业</a-select-option>
            <a-select-option value="lucy">农业</a-select-option>
            <a-select-option value="Yiminghe">轻工业</a-select-option>
          </a-select>
        </div>
      </div>

      <div class="title">
        <div>累计投资额</div>
        <div>同比{{ aigsResultDTO.growthRate }}% <span class="top-img"></span></div>
      </div>
      <div class="value">
        <template v-for="item in aigsResultDTO.totalGr.toString() || 0" :key="item">
          <span class="number-box" v-if="isNumber(item)">{{ item }}</span>
          <span class="dot-box" v-else>{{ item }}</span>
        </template>
        <div class="unit">亿元</div>
      </div>
    </div>
    <div class="center">
      <div class="left">
        <div class="title">目标投资额</div>
        <div class="value">
          <span>{{ aigsResultDTO.targetYtd }}</span>
          <div class="unit">亿</div>
        </div>
      </div>
      <div class="right">
        <div class="title">目标完成率</div>
        <div class="value">
          <span>{{ aigsResultDTO.targetCr }}</span>
          <div class="unit">%</div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="invest-char">
        <RightEchartView :selectTab="selectTab" />
      </div>

      <div class="area-content">
        <div class="area-list">
          <img src="@/assets/images/cityFixedAssets/tuba.png" alt="" class="sizeImg" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent, computed } from 'vue'
import ZTable from '@/components/z-table/index'
import { Column } from '@/interface/table'
import RightEchartView from './rightEchartView.vue'
export default defineComponent({
  name: 'base-center',
  components: {
    ZTable,
    RightEchartView
  },
  props: {
    // 父级统计数据
    statAllData: {
      type: Object,
      default: {}
    }
  },
  setup(props) {
    // 累计投资额增长情况-统计信息
    const aigsResultDTO = computed(
      () =>
        props.statAllData?.aigsResultDTO || {
          totalGr: 6446.46,
          growthRate: 60,
          targetYtd: 10000,
          targetCr: 78
        }
    )
    // 各区指标-统计信息
    // 表头
    const columns: Column[] = [
      {
        dataIndex: 'areaName',
        title: '区域',
        width: '30%',
        ellipsis: true,
        align: 'left'
      },
      {
        dataIndex: 'growthRateColor',
        title: '投资完成率',
        width: '40%',
        ellipsis: true,
        align: 'left'
      },
      {
        dataIndex: 'reserveRateColor',
        title: '储备度',
        width: '30%',
        ellipsis: true,
        align: 'left'
      }
    ]
    const listData = ref([
      { areaName: '番禺区1', growthRateColor: 'RED', reserveRateColor: 'RED' },
      { areaName: '番禺区2', growthRateColor: 'YELLOW', reserveRateColor: 'YELLOW' },
      { areaName: '番禺区3', growthRateColor: 'RED', reserveRateColor: 'YELLOW' },
      { areaName: '番禺区4', growthRateColor: 'YELLOW', reserveRateColor: 'YELLOW' },
      { areaName: '番禺区5', growthRateColor: 'YELLOW', reserveRateColor: 'RED' },
      { areaName: '番禺区6', growthRateColor: 'RED', reserveRateColor: 'GREEN' },
      { areaName: '番禺区7', growthRateColor: 'RED', reserveRateColor: 'GREEN' },
      { areaName: '番禺区8', growthRateColor: 'GREEN', reserveRateColor: 'GREEN' },
      { areaName: '番禺区9', growthRateColor: 'YELLOW', reserveRateColor: 'RED' },
      { areaName: '番禺区10', growthRateColor: 'YELLOW', reserveRateColor: 'RED' },
      { areaName: '番禺区11', growthRateColor: 'YELLOW', reserveRateColor: 'RED' }
    ])

    const value1 = ref<string>('gongye')

    // 通过计算属性实时获取父级传递的 列表数据
    const areaIndexInfos = computed(() => props.statAllData?.areaIndexInfos || listData.value)
    // 获取icon
    function getImage(name: string) {
      return new URL(`/src/assets/images/pageHome/${name}.png`, import.meta.url).href
    }
    // 是否为数字
    function isNumber(number: any) {
      return /^[0-9]$/.test(number)
    }

    // 投资柱状图分栏默认选择 1
    const selectTab = ref(1) as any
    // 分栏切换
    function tabChange(value: number) {
      selectTab.value = value
    }

    function handleChange() {}

    function focus() {}

    return {
      aigsResultDTO,
      areaIndexInfos,
      getImage,
      isNumber,
      columns,

      selectTab,
      tabChange,
      handleChange,
      focus,
      value1
    }
  }
})
</script>
<style lang="scss" scoped>
.view-base {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  color: #ffffff;

  .top {
    height: 160vh * $Bh;
    background: url('/src/assets/images/pageHome/center_top.png') no-repeat;
    background-size: 100% 100%;
    // background: linear-gradient(to right, transparent, #152C61, #152C61, transparent);
    display: flex;
    align-items: center;
    padding-right: 34vw * $Bw;
    :deep(.ant-select) {
      color: #fff;

      .ant-select-selector {
        background-image: url(../../../../assets/images/globalCommon/btn.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border: 0;
        background-color: initial;
      }
      .ant-select-arrow {
        color: #fff;
      }
    }
    .title1 {
      width: 240vh * $Bh;
      float: left;
      font-size: 32vh * $Bh;
      font-weight: bold;
      .textcity {
        font-size: 42vh * $Bh;
        display: flex;
        align-items: center;
        img {
          margin-right: 21vw * $Bw;
        }
      }
    }

    .title2 {
      width: 244vw * $Bw;
      float: left;
      font-size: 32vh * $Bh;
      font-weight: bold;
      margin-right: 120vw * $Bw;
    }

    .title {
      font-size: 32vh * $Bh;
      font-weight: bold;
      margin-right: 34vw * $Bw;

      & > div {
        display: flex;
        align-items: center;
        letter-spacing: 6vw * $Bw;
      }

      .top-img {
        width: 25vw * $Bw;
        height: 20vh * $Bh;
        background: url('/src/assets/images/pageHome/up.png') no-repeat;
        background-size: 100% 100%;
      }
    }

    .value {
      display: flex;

      span {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 50vh * $Bh;
        font-weight: bold;
      }

      .number-box {
        width: 80vw * $Bw;
        height: 112vh * $Bh;
        background: url('/src/assets/images/pageHome/number_box.png') no-repeat;
        background-size: 100% 100%;

        & + .number-box {
          margin-left: 32vw * $Bw;
        }
      }

      .dot-box {
        margin-left: 12vw * $Bw;
        margin-right: 9vw * $Bw;
      }

      .unit {
        display: flex;
        align-items: center;
        margin-left: 32vw * $Bw;
      }
    }
  }

  .center {
    height: 96vh * $Bh;
    margin: 24vh * $Bh 0;
    background: linear-gradient(to right, transparent, #0f2662, #0f2662, transparent);
    display: flex;
    justify-content: center;
    align-items: center;

    & > div {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 68vw * $Bw;
    }

    .title {
      font-size: 30vh * $Bh;
      margin-right: 34vw * $Bw;
      letter-spacing: 3vw * $Bw;
    }

    .value {
      display: flex;
      justify-content: center;
      align-items: center;
      letter-spacing: 6vw * $Bw;

      span {
        font-size: 30vh * $Bh;
        font-weight: bold;
      }

      .unit {
        font-size: 36vh * $Bh;
        font-weight: normal;
        display: flex;
        align-items: center;
      }
    }
  }

  .bottom {
    flex: 1;
    border-radius: 12vh * $Bh;
    background-color: #0f2662a1;
    display: flex;
    flex-direction: column;
    padding: 32vh * $Bh 100vw * $Bw;

    .invest-char {
      height: 390vh * $Bh;

      .tab-btn {
        height: 72vh * $Bh;
        display: flex;
        justify-content: center;

        .btn {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 30vh * $Bh;
          letter-spacing: 6vw * $Bw;
          width: 168vw * $Bw;
          border: 2vh * $Bh solid #233f81;
          border-radius: 4vh * $Bh;
          background-color: #233f81;
          color: #ffffffc0;
          cursor: pointer;

          & + .btn {
            margin-left: 24vw * $Bw;
          }

          &.active {
            border: 2vh * $Bh solid #6a98ff;
            background-color: #2a5ccf;
            color: #ffffff;
          }
        }
      }
    }

    .area-content {
      flex: 1;
      display: flex;
      margin-top: 20vh * $Bh;

      .area-list {
        width: 100%;
        height: 630vh * $Bh;
        border: 0px solid #ccc;

        .list-header {
          font-size: 36vh * $Bh;
          font-weight: bold;
          letter-spacing: 3vw * $Bw;
          line-height: 96vh * $Bh;
          display: flex;
          align-items: center;

          .right-img {
            width: 20vw * $Bw;
            height: 25vh * $Bh;
            background: url('/src/assets/images/pageHome/right.png') no-repeat;
            background-size: 100% 100%;
            margin-right: 18vw * $Bw;
          }
        }

        .sizeImg {
          width: 100%;
          height: 100%;
        }

        .list-box {
          .tz {
            display: flex;
            align-items: center;
            height: 28vh * $h;
            padding-bottom: 3vh * $h;

            img {
              width: 25vh * $h;
              height: 25vh * $h;
            }
          }

          :deep(.ant-table-tbody) {
            .ant-table-row {
              .ant-table-cell {
                line-height: 28vh * $h;
                font-size: 28vh * $h;
                padding: 30vh * $h 33vw * $Bw;
              }

              &:nth-child(odd) {
                .ant-table-cell {
                  line-height: 28vh * $h;
                  font-size: 28vh * $h !important;
                  background: #234888a1;
                  padding: 22vh * $h 33vw * $Bw;
                }
              }
            }
          }

          :deep(.ant-table-thead) {
            .ant-table-cell {
              padding: 21vh * $h 34vw * $Bw;
              border-bottom: 2vh * $Bh solid #5981d7;
            }
          }
        }
      }

      .area-map {
        flex: 1;
        background: url('/src/assets/images/pageHome/map.png') no-repeat;
        background-size: 100% 100%;
      }
    }
  }
}
</style>
